<template>
  <div id="barchart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    datas: Array,
    title: String,
  },
  data: function () {
    return {
      chart:"",
      options: {},
    };
  },
  mounted: function () {
    this.options = {
      title: {
        text: this.title,
   
      },

      tooltip: {
        trigger: "item",
      },
      legend: {
        // top: "5%",
        right: "right",
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          //   dataView: { show: true, readOnly: false },
          // restore: { show: true },
          // saveAsImage: { show: true },
        },
      },
      series: [
        {
          type: "pie",
          radius: [20, 70],
          center: ["40%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 3,
          },
          data:this.datas,
        },
      ],
    };
    this.chart = echarts.init(document.getElementById("barchart"));
    this.chart.setOption(this.options);
  },
   watch:{
    datas:{
      handler(nd){
        this.options.series[0].data=nd;
        this.chart = echarts.init(document.getElementById("barchart"));
        this.chart.setOption(this.options);
      },
      deep:true
    }
  }
};
</script>

<style>
#barchart {
  height: 300px;
  width: 350px;
}
</style>